<style scoped lang="scss">
  .routingConfig-wrapper {
    width:100%;
    height:calc(100% - 24px);
  }
  .routing-wrapper {
    width:100%;
    height:100%;
    background: #fff;
    ::v-deep .dhx_widget{
      background: #fff;

    } 
  }
</style>
<template>
  <div ref="routing"  class="routing-wrapper">
    <starResearch :config="modalConfig"></starResearch>
  </div>

</template>

<script>
import '../../3thComponents/diagram/codebase/diagramWithEditor.css';
import StarDiagram from './StarDiagram.js'
import './template.css'
import pic from './工位.png';
import starResearch from '../application/research/index.vue';
export default {
  name: "designHelper",
  components:{
    starResearch
  },
  data(){
    return {
      starDiagram:null,
      editor:null,//diagram的编辑器
      diagram:null,//diagram实例
      currentShape:null,
      modalConfig:{
        show:false
      }
    }
  },
  props:{
    config:{
      default:()=>{
        return {
          shapeToolbar:{
            copy:()=>{return true},
            remove:()=>{return true}
          },
          templates:[
            {category:'pic2',img:pic,type:'entity',style:'',title:'entity',text:'model'},
            {category:'model',type:'twins',style:'background:#BBFFFF',typeStyle:'background:#668B8B',title:'twins',text:'model'},
            {category:'model',type:'template',style:'background:#54FF9F',typeStyle:'background:#2E8B57',title:'template',text:'model'},
          ]
        }
      }
    },
    data:{
      default:()=>{
        return [
          {x:500,fixed:true,id:1,type:'entity',title:'model.name',text:'产品',mark:'model.name',params:{model:{name:'aaa'}}},
          { from: 1, to: 2.0, forwardArrow: "filled"  },
          { from: 1, to: 2.1, forwardArrow: "filled"  },
          {id:2.0,type:'template',text:'工艺路线'},
          {id:2.1,type:'template',text:'工艺路线'},
          { from: 2.0, to: 3, forwardArrow: "filled"  },
          { from: 2.1, to: 3, forwardArrow: "filled"  },
          { from: 3, to: 4, forwardArrow: "filled"  },
          { from: 3, to: 5, forwardArrow: "filled"  },
          // { from: 2.0, to: 4, forwardArrow: "filled"  },
          {id:3,type:'entity',title:'model.name',text:'产品',mark:'model.name',params:{model:{name:'aaa'}}},
          {id:4,type:'twins',text:'工作中心'},
          {id:5,type:'twins',text:'工作中心'},
        ]
      }
    }
  },
  computed:{
    
  },
  beforeMount() {
    
  },
  mounted() {
    this.init();
  },
  watch:{

  },
  methods:{
    init(){
      this.starDiagram = StarDiagram.createEditor(this.$refs.routing,this.config);
      this.diagram = this.starDiagram.diagram;
      this.editor = this.starDiagram.editor;
      if(this.editor){
        this.starDiagram.setEditorEvent('beforeShapeIconClick',(iconId,shape)=>{
          this.$emit('beforeShapeIconClick',this.starDiagram,iconId,shape)
        });
        this.starDiagram.setEditorEvent('afterShapeIconClick',(iconId,shape)=>{
          this.$emit('afterShapeIconClick',this.starDiagram,iconId,shape)
        });
      }
      if(this.diagram){
        this.starDiagram.setDiagramEvent('shapeClick',(id, event)=>{
          // console.log(this.starDiagram.getDiagramData())
          this.modalConfig.show = true;
          // this.$emit('shapeClick',this.starDiagram,id, event)
        })
        this.starDiagram.setDiagramEvent('shapeDblClick',(id, event)=>{
          this.$emit('shapeDblClick',this.starDiagram,id, event)
        })
        this.starDiagram.setDiagramEvent('lineClick',(id, event)=>{
          this.$emit('lineClick',this.starDiagram,id, event)
        })
        this.starDiagram.setDiagramEvent('lineDblClick',(id, event)=>{
          this.$emit('lineDblClick',this.starDiagram,id, event)
        })
        this.starDiagram.setDiagramEvent('afterAdd',(newItem)=>{
          this.$emit('afterAdd',this.starDiagram,newItem)
        })
        this.starDiagram.setDiagramEvent('afterRemove',(newItem)=>{
          this.$emit('afterRemove',this.starDiagram,newItem)
        })
        this.starDiagram.setDiagramEvent('beforeAdd',(newItem)=>{
          this.$emit('beforeAdd',this.starDiagram,newItem)
        })
        this.starDiagram.setDiagramEvent('beforeRemove',(newItem)=>{
          this.$emit('beforeRemove',this.starDiagram,newItem)
        })
        this.starDiagram.setDiagramEvent('change',(id, status, shape)=>{
          this.$emit('change',this.starDiagram,id, status, shape)
        })
        this.starDiagram.setDiagramEvent('load',()=>{
          this.$emit('load',this.starDiagram)
        })
      }
      
      this.$nextTick(()=>{
        /**初始化工具栏、左右面板*/
        this.starDiagram.setEditorPanel();
      })
      this.starDiagram.setDiagramData(this.data);
      this.starDiagram.autoPlace();
      
    },
  }
}
</script>
